<template>
	<view class="spacetime">
		<Hearder :name="'预约时间设置'" v-if="type==1"></Hearder>
		<Hearder :name="'空间时间设置'" v-if="type==2"></Hearder>
		<view class="timelist bgbottom">
			<view class="timeevery" @click="choosetime(1)">
				<view>开始时间:</view>
				<view>
					<text>{{start_time}}</text>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
			<view class="timeevery" @click="choosetime(2)">
				<view>结束时间:</view>
				<view>
					<text>{{end_time}}</text>
					<u-icon name="arrow-right" color="#999" size="16"></u-icon>
				</view>
			</view>
		</view>
		<view class="surebtn" @click="suremodify">确定修改</view>
		<u-popup mode="bottom" :show="showtime">
			<view class="numbergoods">
				<view class="maskbtn">
					<text v-show="choosenum==1">开始时间</text>
					<text v-show="choosenum==2">结束时间</text>
					<text style="color:#999" @click="cancel">取消</text>
				</view>
				<picker-view @change="bindChange">
					<picker-view-column>
						<view class="item" style="padding-left: 160rpx;" v-for="item in timelist">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" style="padding-right: 160rpx;" v-for="item in minutelist">{{item}}</view>
					</picker-view-column>
				</picker-view>
				<view class="surebtn" @click="$u.throttle(changetime, 1000)">确定修改</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data(){
			return{
				showtime:false,
				timelist:[],
				minutelist:[],
				space_id:'',
				start_time:'00:00',
				end_time:'00:00',
				choosenum:1,
				val:[0,0],
				specialarea_type:1,
				type:1
			}
		},
		onLoad(options) {
			this.specialarea_type = options.specialarea_type
			this.type = options.type
			if(this.type==1){
				uni.setNavigationBarTitle({
				　　title: '预约时间设置'
				})
			}
			for(var i = 0; i < 24; i++){
				if(i<10){
					this.timelist.push(''+'0'+i+'')
				}else{
					this.timelist.push(''+i+'')
				}
			}
			for(var i = 0; i <= 59; i++){
				if(i<10){
					this.minutelist.push(''+'0'+i+'')
				}else{
					this.minutelist.push(''+i+'')
				}
			}
			this.request('/space/getSpaceConsole',{specialarea_type:this.specialarea_type}).then(res => {
				if(res.data.code==1){
					this.space_id = res.data.data.space_id
					if(this.type==1){
						this.start_time = res.data.data.reserve_start_time
						this.end_time = res.data.data.reserve_end_time
					}else if(this.type==2){
						this.start_time = res.data.data.start_time
						this.end_time = res.data.data.end_time
					}
				}
			})
		},
		methods:{
			choosetime(t){
				this.showtime = true
				this.choosenum = t
			},
			cancel(){
				this.showtime = false
				this.val=[0,0]
			},
			bindChange(e){
				this.val = e.detail.value
				if(this.val.length==1){
					this.val.push(0)
				}else if(this.val[0]==undefined){
					this.val[0]=0
				}
			
			},
			changetime(){
				if(this.choosenum==1){
					this.start_time = this.timelist[this.val[0]] + ':' + this.minutelist[this.val[1]]
				}else if(this.choosenum==2){
					this.end_time = this.timelist[this.val[0]] + ':' + this.minutelist[this.val[1]]
				}
				this.showtime = false
				this.val=[0,0]
			},
			suremodify(){
				if(this.type==1){
					this.request('/space/editReserveTime',{
						space_id:this.space_id,
						reserve_start_time:this.start_time,
						reserve_end_time:this.end_time,
						specialarea_type:this.specialarea_type
					}).then(res => {
						if(res.data.code==1){
							this.$tip(res.data.msg)
							setTimeout(()=>{
								uni.navigateBack()
							},500)
						}else{
							this.$tip(res.data.msg)
						}
					})
				}else if(this.type==2){
					this.request('/space/toSpace',{
						space_id:this.space_id,
						start_time:this.start_time,
						end_time:this.end_time,
						specialarea_type:this.specialarea_type
					}).then(res => {
						if(res.data.code==1){
							this.$tip(res.data.msg)
							setTimeout(()=>{
								uni.navigateBack()
							},500)
						}else{
							this.$tip(res.data.msg)
						}
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.spacetime{
		.timelist{
			padding: 0 4%;
			.timeevery{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 110rpx;
				&:first-of-type{
					border-bottom: 1rpx solid #eee;
				}
				text{
					margin-right: 8rpx;
				}
			}
		}
		.surebtn{
			background: $uni-item-color;
			text-align: center;
			line-height: 88rpx;
			height: 88rpx;
			color: #fff;
			margin: 26rpx 4%;
			font-size: 32rpx;
		}
		.numbergoods{
			height: 740rpx;
			.maskbtn{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #eee;
				padding: 30rpx 4%;
				text{
					font-size: 28rpx;
				}
			}
			picker-view{
				width: 100%;
				height: 62%;
				position: absolute;
				bottom: 180rpx;
				right:0;
				z-index:999;
				background-color: #F8F8F8;
				.uni-picker-view-indicator:after, .uni-picker-view-indicator:before{
					border: none;
				}
				.uni-picker-view-indicator{
					height: 90rpx;
				}
			}
			.item{
				line-height: 90rpx;
				text-align: center;
				font-size: 36rpx;
			}
			.surebtn{
				position: absolute;
				bottom: 0;
				background: $uni-item-color;
				text-align: center;
				line-height: 88rpx;
				width: 92%;
				height: 88rpx;
				color: #fff;
				margin: 40rpx 4%;
			}
		}
	}
</style>